<template>
  <VDialog
    @close="handleClose"
    @save="save"
    :loading="loading"
    :title="isEdit ? '编辑' : '新增'"
    width="960px"
  >
    <template #content>
      <div>
        <el-form
          ref="formRef"
          :model="formValues"
          :rules="rules"
          label-position="top"
        >
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="出票日期" prop="ticketAt">
                <el-date-picker
                  v-model="formValues.ticketAt"
                  type="date"
                  placeholder="选择日期"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                  class="w-[100%]"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="到期日期" prop="expiredAt">
                <el-date-picker
                  v-model="formValues.expiredAt"
                  type="date"
                  placeholder="选择日期"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                  class="w-[100%]"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="供应商名称" prop="supplierName">
                <!-- <el-select-v2
                  v-model="formValues.supplierId"
                  placeholder="请选择供应商名称"
                  :options="options?.supplierList || []"
                  clearable
                  filterable
                  class="w-[100%]"
                  @change="handleSupplier"
                /> -->
                <el-input
                  v-model="formValues.supplierName"
                  placeholder="请输入供应商名称"
                  class="w-[100%]"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="采购制单人" prop="procurementMakerId">
                <VCascader
                  v-model="formValues.procurementMakerId"
                  :multiple="false"
                  class="w-[100%]"
                  @change="handleProcurementMaker"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="收款账号" prop="receiptAccount">
                <el-input
                  v-model="formValues.receiptAccount"
                  placeholder="请输入收款账号"
                  class="w-[100%]"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="开户银行" prop="depositBank">
                <el-input
                  v-model="formValues.depositBank"
                  placeholder="请输入开户银行"
                  class="w-[100%]"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="银承张数" prop="acceptance">
                <el-input-number
                  v-model="formValues.acceptance"
                  placeholder="请输入银承张数"
                  :min="0"
                  :controls="false"
                  class="w-[100%]"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="合计金额" prop="amount">
                <el-input-number
                  v-model="formValues.amount"
                  :min="0"
                  :controls="false"
                  placeholder="请输入合计金额"
                  class="w-[100%]"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="承兑银行" prop="acceptanceBankId">
                <VSelects
                  v-model="formValues.acceptanceBankId"
                  placeholder="请选择"
                  :dataSourse="options?.channelList || []"
                  class="w-[100%]"
                  labelField="channelName"
                  valueField="id"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="保证金年化利率(%)">
                <el-input-number
                  v-model="formValues.marginApy"
                  :min="0"
                  :controls="false"
                  placeholder="请输入保证金年化利率"
                  class="w-[100%]"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="手续费(0.05%)/RMB">
                <el-input-number
                  v-model="formValues.serviceCharge"
                  :min="0"
                  :controls="false"
                  placeholder="请输入手续费"
                  class="w-[100%]"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="利息(RMB)">
                <el-input-number
                  v-model="formValues.interestAmount"
                  :min="0"
                  :controls="false"
                  placeholder="请输入利息"
                  class="w-[100%]"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="开票主体" prop="invoicingSubject">
                <el-input
                  v-model="formValues.invoicingSubject"
                  placeholder="请输入开票主体"
                  class="w-[100%]"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </template>
  </VDialog>
</template>
<script setup>
import { ElMessage } from "element-plus";
import { reactive } from "vue";
import { formatTime } from "@/utils/time.js";
import { addAcceptanceBill, editAcceptanceBill } from "../../../api.js";
const props = defineProps({
  data: { type: Object, default: () => {} },
  options: { type: Object, default: () => {} },
});
const { data, options } = toRefs(props);
const isEdit = computed(() => data.value?.id);
const emit = defineEmits(["update:modelValue", "close", "refresh"]);
const loading = ref(false);
const formRef = ref();
const formValues = ref({
  id: null,
  ticketAt: formatTime(),
  expiredAt: null,
  procurementMakerId: null,
  receiptAccount: null,
  depositBank: null,
  acceptance: null,
  supplierName: null,
  procurementMaker: null,
  amount: null,
  acceptanceBankId: null,
  marginApy: null,
  serviceCharge: null,
  interestAmount: null,
  invoicingSubject: null,
});
const rules = reactive({
  ticketAt: [{ required: true, message: "请选择出票日期", trigger: "change" }],
  expiredAt: [{ required: true, message: "请选择到票日期", trigger: "change" }],
  supplierName: [
    { required: true, message: "请选择供应商名称", trigger: "change" },
  ],
  procurementMakerId: [
    { required: true, message: "请选择采购制单人", trigger: "change" },
  ],
  receiptAccount: [
    { required: true, message: "请输入收款账号", trigger: "blur" },
  ],
  depositBank: [{ required: true, message: "请输入开户银行", trigger: "blur" }],
  acceptance: [{ required: true, message: "请输入银承张数", trigger: "blur" }],
  amount: [{ required: true, message: "请输入合计金额", trigger: "blur" }],
  acceptanceBankId: [
    { required: true, message: "请选择承兑银行", trigger: "change" },
  ],
  invoicingSubject: [
    { required: true, message: "请输入开票主体", trigger: "change" },
  ],
});
watch(
  () => props.data,
  (val) => {
    if (val) {
      for (let key in formValues.value) {
        formValues.value[key] = val[key];
      }
    }
  }
);
// const handleSupplier = (val) => {
//   let obj = options?.value?.supplierList?.find((item) => item.value == val);
//   if (!obj) return (formValues.value.supplierName = null);
//   formValues.value.supplierName = obj.label;
// };
const handleProcurementMaker = (val) => {
  formValues.value.procurementMaker = val?.labels?.[0] || null;
};
const save = async () => {
  await formRef.value.validate(async (valid, fields) => {
    if (valid) {
      // if (formValues.value.ticketAt) {
      //   formValues.value.ticketAt = `${formValues.value.ticketAt} 00:00:00`;
      // }
      // if (formValues.value.expiredAt) {
      //   formValues.value.expiredAt = `${formValues.value.expiredAt} 00:00:00`;
      // }
      try {
        loading.value = true;
        const { code, message } = await (formValues.value?.id
          ? editAcceptanceBill
          : addAcceptanceBill)(formValues.value);
        if (code !== 200) return;
        ElMessage.success(formValues.value?.id ? "编辑成功" : "添加成功");
        handleClose(true);
      } catch (error) {
      } finally {
        loading.value = false;
      }
    }
  });
};

const handleClose = async (refresh) => {
  formValues.value = {
    id: null,
    ticketAt: formatTime(),
    expiredAt: null,
    procurementMakerId: null,
    receiptAccount: null,
    depositBank: null,
    acceptance: null,
    supplierName: null,
    procurementMaker: null,
    amount: null,
    acceptanceBankId: null,
    marginApy: null,
    serviceCharge: null,
    interestAmount: null,
    invoicingSubject: null,
  };
  formRef.value.resetFields();
  emit("update:modelValue", false);
  emit("close");
  if (refresh) emit("refresh");
};
</script>
